<style>
  .card{
    margin: 12px 0;
    text-align: left;
  }
  .has-hover{
    color: black;
  }
  a.has-hover :hover{
    color: #2d8cf0;
  }
  .fixedCard{
    border-radius: 4px;
    font-size: 14px;
    position: fixed;
    transition: all .2s ease-in-out;
    width: 22%;
    text-align: left;
  }
  .card-section{
    text-align: left;
  }
  .card-h4{
    margin-bottom: 10px;
  }
  .card-p{
    text-align: justify;
  }
  .card-img{
    width: 100px;
    height: 100px;
  }
  .card-foot{
    margin-top: 10px;
    margin-bottom: 5px;
    padding: 5px 0;
  }
  .writer-count{
    font-weight: bold;
    margin-top: 4px;
    font-size: 16px;
  }
</style>
<template>
  <div>
  <Row style="padding:10px">
    <Col span="17">
      <Card :bordered="false" class="card" dis-hover>
        <section slot="title" class="card-section">
          <span slot="prepend">
             <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg" alt="" style="width: 24px;height: 24px;line-height: 24px;border-radius: 12px;">
          </span>
          <span style="color:#ef4868;margin-left: 3px;">
           EvelynHU
          </span>
          <span style="font-size: 10px;color:darkgrey;">04-29 09:45</span>
          <span class="ivu-tag ivu-tag-green ivu-tag-checked" style="float: right;"><Icon type="ios-alarm-outline" /></span>
        </section>
        <div>
          <!--<a href="/#/art/detail" class="has-hover" target="_blank"><h4 class="card-h4">这是个标题</h4></a>-->
          <a href="javascript:void(0)" style="color: black;font-weight: bold;">
            <p class="card-p" style="text-align: center;">系统是否存在bug？？？</p>
          </a>
          <p style="text-indent: 30px;margin-top: 10px;">系统是否存在bug？？？感觉显示有点问题系统是否存在bug？？？感觉显示有点问题系统是否存在bug？？？感觉显示有点问题系统是否存在bug？？？感觉显示有点问题</p>
        </div>
        <div class="card-foot">
          <a href="javascript:void(0)" style="color: darkgrey;">回复(10)</a>
        </div>
        <div style="margin-bottom: 40px;margin-top: 5px;">
          <!--<ueditor></ueditor>-->
          <h4 style="font-size: 16px;">回复</h4>
          <Input type="textarea" style="margin-top: 10px;"/>
          <div style="float: right;margin-top: 10px;">
            <i-button type="primary">确定回复</i-button>
          </div>
        </div>
      </Card>
      <!--这是评论或回复-->
      <Card style="margin-left: 10px;text-align: left;" title="回复">
        <div v-for="item in articleList" :key="item.index">
          <div>
            <section slot="title" class="card-section">
            <span slot="prepend">
               <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg" alt="" style="width: 24px;height: 24px;line-height: 24px;border-radius: 12px;">
            </span>
            <span style="color:#ef4868;margin-left: 3px;">
             EvelynHU
            </span>
            <span style="font-size: 10px;color:darkgrey;">04-29 09:45</span>
            <span class="ivu-tag ivu-tag-green ivu-tag-checked" style="float: right;"><Icon type="ios-alarm-outline" /></span>
            </section>
            <div style="margin-top: 6px;">
              <!--<a href="/#/art/detail" class="has-hover" target="_blank"><h4 class="card-h4">这是个标题</h4></a>-->
              <Row>
                <a href="javascript:void(0)" style="color: black;" target="_blank">
                  <p class="card-p">查看是否已解决</p>
                </a>
              </Row>
              <Divider/>
            </div>
          </div>
        </div>

      </Card>
    </Col>
    <Col span="6" offset="1">
      <Card class="fixedCard" title="留言者" :padding="2" dis-hover>
        <Card dis-hover :bordered="false" style="margin: 0 16px;">
          <section slot="title" class="card-section">
            <span slot="prepend" class="dev-user-pop-user-info-avatar ivu-avatar ivu-avatar-square ivu-avatar-large ivu-avatar-image">
               <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg"
                    alt="" style="width: 60px;height: 60px;line-height: 60px;border-radius: 2px;">
            </span>
            <div style="color:#ef4868;display: inline-block;height: 60px;line-height: 60px; vertical-align: middle;margin-left: 12px;">
              <span style="font-weight: bold;font-size: 14px;">
             EvelynHU
            </span>
            </div>
          </section>
          <div style="text-align: center;">
            <Row>
              <Col span="8">
                <span style="color: #808695;">问题</span>
                <p class="writer-count">0</p>
              </Col>
              <Col span="8">
              <span style="color: #808695;">文章</span>
              <p class="writer-count">100</p>
              </Col>
              <Col span="8">
              <span style="color: #808695;">关注</span>
              <p class="writer-count">1万</p>
              </Col>
            </Row>
          </div>
        </Card>
        <div :padding="0" shadow dis-hover style="padding: 16px;">
          <i-button style="width: 45%;"><Icon type="ios-brush-outline" />提问</i-button>
          <i-button style="width: 45%;float: right;"><Icon type="md-add" />关注</i-button>
        </div>
      </Card>

    </Col>
  </Row>

  </div>
</template>

<script>
  let Base64 = require('js-base64').Base64;
  export default {
    data () {
      return {
        articleList:[
          {
            index:1
          },
          {
            index:2
          },
          {
            index:3
          },
          {
            index:4
          },
          {
            index:5
          },
          {
            index:6
          },
          {
            index:7
          },
          {
            index:8
          },
          {
            index:9
          },
          {
            index:10
          }
        ]
      };
    },
    methods: {
      init () {

      }
    },
    mounted () {
      this.init();
    }
  };
</script>
